
<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-content">
				<text class="header-title">温控系统</text>
			</view>
		</view>
		<view class="content-container">
			<!-- 主温度显示 -->
			<view class="main-temp-display">
				<view class="temp-header">
					<view class="temp-main">
						<text class="temp-value">{{ temperature[0] }}°</text>
						<text class="temp-label">室内温度</text>
					</view>
					<view class="system-status">
						<text class="status-label">系统状态</text>
						<view class="status-value">
							<view class="status-dot"></view>
							<text class="status-text" v-if="deviceStatus == 0">离线</text>
							<text class="status-text" v-else-if="deviceStatus == 1">在线</text>
							<text class="status-text" v-else-if="deviceStatus == 2">未激活</text>
						</view>
					</view>
				</view>
				<view class="temp-footer">
					<view class="update-info">
						<uni-icons class="icon" type="calendar" size="14" color="rgba(255, 255, 255, 0.7)"></uni-icons>
						<text class="update-text">更新于 {{ lastUpTime }}</text>
					</view>
					<view class="sync-button" @click="updatashijian()">
						<uni-icons class="icon" type="refresh" size="14" color="rgba(255, 255, 255, 0.7)"></uni-icons>
						<text class="sync-text">同步时间</text>
					</view>
				</view>
			</view>
			<!-- 温度设置区域 -->
			<view class="control-header">
				<text class="control-title">温控设置</text>
				<view class="timer-button" @click="goTimePointConfig()">
					<uni-icons class="icon" type="calendar" size="16" color="#ffffff"></uni-icons>
					<text class="timer-text">定时设置</text>
				</view>
			</view>
			<!-- 温度数据卡片 -->
			<view class="temp-cards">
				<view class="temp-card">
					<view class="card-content">
						<view class="icon-wrapper icon-wrapper-red">
							<image src="https://ai-public.mastergo.com/ai/img_res/405e6bb98cec373eb177f30a7371112d.jpg"
								class="icon-image"></image>
						</view>
						<text class="card-temp">{{ temperature[1] }}°</text>
						<text class="card-label">壁挂炉温度</text>
						<text class="card-status">运行中</text>
					</view>
				</view>
				<view class="temp-card">
					<view class="card-content">
						<view class="icon-wrapper icon-wrapper-yellow">
							<image src="https://ai-public.mastergo.com/ai/img_res/f2de6d44b250c18ebb46ec25623e258c.jpg"
								class="icon-image"></image>
						</view>
						<text class="card-temp">{{ temperature[2] }}°</text>
						<text class="card-label">太阳能温度</text>
						<text class="card-status">正常</text>
					</view>
				</view>
				<view class="temp-card">
					<view class="card-content">
						<view class="icon-wrapper icon-wrapper-blue">
							<image src="https://ai-public.mastergo.com/ai/img_res/97823b443dd1d1d157a85e74a8d59199.jpg"
								class="icon-image"></image>
						</view>
						<text class="card-temp">{{ ctrwendu }}°</text>
						<text class="card-label">设定温度</text>
						<text class="card-status">已应用</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import "@/utils/date-format.js"
let status = [
	"离线", "在线", "未激活"
]
export default {
	data() {
		return {
			// 温度，
			temperature: [
				0, 0, 0, 0
			],
			// 设备最后一次在线时间
			lastUpTime: "--",
			// 设备状态，0-离线，1-在线，2-未激活
			deviceStatus: 0,
			// 定时器id
			intervalId: null,
			// 控制状态
			openStatus: 0,
			// 当前状态
			currentStatus: 0,
			// 当前控制温度
			ctrwendu: 0,
			Authorization: "version=2022-05-01&res=products%2F336bFZYCce&et=1893427200&method=sha1&sign=nmlRlyEpUtJ1yzyN3mFo3UfQilE%3D"
		}
	},
	onShow() {

		this.intervalId = setInterval(() => {
			this.getDeviceDetail();
			console.log("onShow");
		}, 5000);
console.log("onShow-home");

	},
	onHide() {
		clearInterval(this.intervalId)
	},
	methods: {
		//获取设备状态
		getDeviceDetail() {
			let that = this;
			console.log('request success'+new Date().Format());
			uni.request({
				url: "https://iot-api.heclouds.com/device/detail?product_id=336bFZYCce&device_name=wendu",
				dataType: 'text',
				header: {
					Authorization: this.Authorization
				},
				data: {},
				success: (res) => {

					if (res.statusCode == 200) {
						let data = JSON.parse(res.data);
						that.deviceStatus = data.data.status;
						that.lastUpTime = new Date(data.data.last_time).Format();
						// .last_time	datetime	设备最后一次在线时间
						if (that.deviceStatus == 1) {
							that.getCurrentDatapoints();
						}

					}
				},
				fail: (err) => {

				},
				complete: () => {
					this.loading = false;
				}
			});

		},
		getCurrentDatapoints() {
			let that = this;
			uni.request({
				url: "https://iot-api.heclouds.com/datapoint/current-datapoints?product_id=336bFZYCce&device_name=wendu",
				dataType: 'text',
				header: {
					Authorization: this.Authorization
				},
				data: {},
				success: (res) => {

					if (res.statusCode == 200) {
						let data = JSON.parse(res.data);

						data = data.data.devices[0].datastreams;

						for (var i = 0; i < data.length; i++) {
							let item = data[i]
							if (item.id == "wendu1") {
								that.temperature[0] = item.value
							} else if (item.id == "wendu2") {
								that.temperature[1] = item.value
							} else if (item.id == "wendu3") {
								that.temperature[2] = item.value
							} else if (item.id == "wendu4") {
								that.temperature[3] = item.value
							} else if (item.id == "openStatus") {
								that.openStatus = item.value
							} else if (item.id == "currentStatus") {
								that.currentStatus = item.value
							} else if (item.id == "ctrwendu") {
								that.ctrwendu = item.value
							}
						}
						console.log('request success', data);

					}
				},
				fail: (err) => {

				},
				complete: () => {
					this.loading = false;
				}
			});
		},
		updatashijian() {
			if (this.deviceStatus != 1) {
				uni.showToast({
					title: "设备离线",
					mask: false,
					duration: 500
				})
				return
			}
			uni.showToast({
				title: "正在同步...",
				mask: true,
				duration: 1000
			})
			// 获取当前时间戳
			let that = this;
			uni.request({
				url: "https://iot-api.heclouds.com/datapoint/synccmds?product_id=336bFZYCce&device_name=wendu&timeout=30",
				dataType: 'text',
				method: 'POST',
				header: {
					Authorization: this.Authorization
				},
				data: {
					synTime: Math.floor(new Date().getTime() / 1000 + 8 * 60 * 60) + "",
				},
				success: (res) => {
					// console.log("22",res);
					if (res.statusCode == 200) {
						let data = JSON.parse(res.data);
						that.linkContent = data.msg
					}
					uni.showToast({
						title: "同步成功",
						mask: false,
						duration: 500
					})
				},
				fail: (err) => {
					uni.showToast({
						title: "更新失败",
						mask: false,
						duration: 500
					})
				},
				complete: () => {
					this.loading = false;

				}
			});
		},
		goTimePointConfig() {
			console.log("dddd")
			uni.navigateTo({
				url: '/pages/component/ponitConfig/ponitConfig',
				fail: function (res) {
					console.log(res);
				},
				success: (res) => {
					console.log(res);

				}
			})
		}
	}
}
</script>
<style>
page {
	height: 100%;
	background-color: #f9fafb;
}

.container {
	min-height: 100%;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 10;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.header-content {
	padding: 24rpx 32rpx;
}

.header-title {
	font-size: 24px;
	font-weight: 500;
	color: #111827;
}

.content-container {
	padding: 120rpx 32rpx 32rpx;
}

.main-temp-display {
	background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
	border-radius: 32rpx;
	padding: 48rpx;
	margin-bottom: 48rpx;
}

.temp-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 64rpx;
}

.temp-value {
	font-size: 48px;
	font-weight: 300;
	color: #ffffff;
	margin-bottom: 16rpx;
	line-height: 1;
}

.temp-label {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
}

.system-status {
	text-align: right;
}

.status-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.status-value {
	display: flex;
	align-items: center;
	margin-top: 8rpx;
}

.status-dot {
	width: 16rpx;
	height: 16rpx;
	background-color: #4ade80;
	border-radius: 50%;
	margin-right: 16rpx;
}

.status-text {
	color: #ffffff;
	font-size: 16px;
}

.temp-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.update-info {
	display: flex;
	align-items: center;
}

.update-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-left: 16rpx;
}

.sync-button {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.1);
	padding: 12rpx 24rpx;
	border-radius: 16rpx;
	cursor: pointer;
}

.sync-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-left: 16rpx;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
}

.control-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 48rpx;
}

.control-title {
	font-size: 20px;
	font-weight: 500;
	color: #111827;
}

.timer-button {
	display: flex;
	align-items: center;
	background-color: #3B82F6;
	padding: 16rpx 32rpx;
	border-radius: 16rpx;
}

.timer-text {
	font-size: 14px;
	color: #ffffff;
	margin-left: 16rpx;
}

.temp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32rpx;
}

.temp-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-wrapper {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rpx;
	overflow: hidden;
}

.icon-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.icon-wrapper-red {
	background-color: #fef2f2;
}

.icon-wrapper-yellow {
	background-color: #fefce8;
}

.icon-wrapper-blue {
	background-color: #eff6ff;
}

.card-temp {
	font-size: 20px;
	font-weight: 500;
	color: #111827;
}

.card-label {
	font-size: 14px;
	color: #6b7280;
	margin-top: 8rpx;
}

.card-status {
	font-size: 14px;
	color: #9ca3af;
	margin-top: 16rpx;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>